<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="addFormVisible = true">添加</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <z-table ref="table" rowKey="memberId" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
      :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;" v-if="record.submitStatus == 1">查看</a-button>
        <a-button @click="onDetail(record)" type="link" style="padding:0;" v-else>提醒</a-button>

        <!-- <a-button @click="onPeopleDetail(record)" type="link" style="padding:0;margin-left: 10px;">参与人员</a-button> -->
      </template>
      <template slot="status" slot-scope="text, record">
        <span v-if="record.submitStatus == 1" style="color: green;">已提交</span>
        <span v-if="record.submitStatus == 2" style="color: red;">未提交</span>
      
        
      </template>
    </z-table>
    <a-modal title="添加" width="1000px" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-form-model ref="addForm" :model="addForm" :label-col="{span: 4}" :wrapper-col="{span: 20}">
          <a-form-model-item label="组员名称" prop="memberId" :rules="{required: true, message: '请选择组员', trigger: ['change']}">
            <a-select v-model="addForm.memberId">
              <a-select-option :value="item.id" v-for="item in memberList" :key="id">{{item.memberName}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择单元" prop="unitId" :rules="{required: true, message: '请选择单元', trigger: ['change']}">
            <a-select v-model="addForm.unitId">
              <a-select-option :value="item.relateKey" v-for="item in headerData" :key="item.relateKey">{{item.headerName}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-row style="margin-bottom: 25px;">
            <a-col :span="4"></a-col>
            <a-col :span="20">请就每一项目，根据小组最初的情形与现在的情形分别给予1至7分。7分表示最接近事实，1分表示与事实最不符合。</a-col>
          </a-row>
          
          
          <a-row>
            <a-col :span="4">
              <div class="required">气氛：</div>
            </a-col>
            <a-col :span="20">
              <a-table :columns="formColumns" :data-source="metrics['气氛']" :pagination="false">
                <template slot-scope="text, record, index" slot="content">
                  {{metrics['气氛'][index].itemNmae}}
                </template>
                <template slot-scope="text, record, index" slot="before">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.beforePoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].beforePoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="now">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.afterPoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].afterPoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
              </a-table>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="required">分享：</div>
            </a-col>
            <a-col :span="20">
              <a-table :columns="formColumns" :data-source="metrics['分享']" :pagination="false">
                <template slot-scope="text, record, index" slot="content">
                  {{metrics['分享'][index].itemNmae}}
                </template>
                <template slot-scope="text, record, index" slot="before">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.beforePoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].beforePoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="now">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.afterPoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].afterPoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
              </a-table>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="required">目标：</div>
            </a-col>
            <a-col :span="20">
              <a-table :columns="formColumns" :data-source="metrics['目标']" :pagination="false">
                <template slot-scope="text, record, index" slot="content">
                  {{metrics['目标'][index].itemNmae}}
                </template>
                <template slot-scope="text, record, index" slot="before">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.beforePoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].beforePoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="now">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.afterPoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"   style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].afterPoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
              </a-table>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="required">气氛：</div>
            </a-col>
            <a-col :span="20">
              <a-table :columns="formColumns" :data-source="metrics['气氛2']" :pagination="false">
                <template slot-scope="text, record, index" slot="content">
                  {{metrics['气氛2'][index].itemNmae}}
                </template>
                <template slot-scope="text, record, index" slot="before">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.beforePoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"  style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].beforePoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="now">
                  <a-form-model-item :prop="`result.${record.groupName}${record.id}.afterPoint`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入', trigger: ['change']}">
                    <a-input-number :min="1" :max="7"  style="width: 100%;margin: -5px 0;" v-model="addForm.result[`${record.groupName}${record.id}`].afterPoint"
                      placeholder="请输入" />
                  </a-form-model-item>
                </template>
              </a-table>
            </a-col>
          </a-row>

          
      </a-form-model>
    </a-modal>
    
  </div>
</template>

<script>
  import { memberList } from '@/api/sjsk/activity/group/detail/mature/table1'
  import { getList, metrics, add } from '@/api/sjsk/activity/group/detail/mature/table2'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    components: {
      
    },
    data() {
      return {
        loading:false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {},
        form: {},
        headerData: [],
        memberList: [],
        metrics: {},
        formColumns: [
          {
            title: '内容',
            
            dataIndex: 'itemName',
            align: 'left',
            // scopedSlots: { customRender: 'content' }
          },
          {
            title: '最初',
            width: 150,
            align: 'center',
            scopedSlots: { customRender: 'before' }
          },
          {
            title: '现在',
            width: 150,
            align: 'center',
            scopedSlots: { customRender: 'now' }
          }
        ],
        addFormVisible: false,
        addForm: {
          activityId: '',
          unitId: '',
          memberId: '',
          "result": {}
        }
      }
    },
    created() {
      this.getMemberList()
      this.onQuery()
      this.getMetrics()
      this.addForm.activityId = this.$route.query.id
    },
    computed: {
      
      columns: function() {
        let columns = [{
            title: '组员名称',
            dataIndex: 'memberName',
            // width: 80,
            align: 'center'
        }]
        this.headerData.map(item => {
          columns.push({
            title: item.headerName,
            width: 80,
            align: 'center',
            scopedSlots: { customRender: 'status' }
          }) 
        })
        columns.push({
          title: '最新提交日期',
          align: 'center',
          dataIndex: 'updateTime',
        })
        columns.push({
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        })
        return columns
      }
    },
    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 5)
      },
      onAddSubmit() {
        console.log(this.addForm)
        
        
        this.$refs.addForm.validate().then(res => {
          
          
          
          const form = JSON.parse(JSON.stringify(this.addForm))
          const result = []
          for (let key in form.result) {
            result.push(form.result[key])
          }
          form.result = result
          
          
          add(form).then(res => {
            if(res.success) {
              this.$message.success('添加成功')
              this.addFormVisible = false
              this.$refs.addForm.resetFields()
              this.onQuery()
            } else {
              this.$message.error(res.message)
            }
            
          }).catch(res => {
            this.$message.error(res.message)
          })
        })
      },
      onAddFormCancel() {
        this.addFormVisible = false
        this.$refs.addForm.resetFields()
      },
      
      getMetrics() {
        metrics().then(res => {
          let obj = {}
          res.result.map(item => {
            obj[item.viewName] = item.metrics.map(child => {
              const key = child.groupName + child.id
              this.$set(this.addForm.result, key, {
                metricId: child.id,
                beforePoint: null,
                afterPoint: null
              })
              return child
            })
          })
          console.log(this.addForm)
          this.metrics = obj
          console.log(this.metrics)
        })
      },
      getMemberList() {
        memberList({activityId: this.$route.query.id}).then(res => {
          if(res.success) {
            this.memberList = res.result.records
          }
        })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = {
          currentPage: 'pageNo'
        }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        form.activityId = this.$route.query.id
        this.loading = true
        getList(form).then((res) => {
            if (res.success) {
              console.log(res.result.data.records)
              this.pageData = res.result.data.records
              this.headerData = res.result.unitTableHeaders
              
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;
    .btn-wrap{
      margin-bottom: 20px;
    }
  }
  /deep/.ant-input-number-handler-wrap {
      display: none;
  }
  .required {
    text-align: right;
  
    &::before {
      content: '*';
      color: red;
      margin-right: 5px;
    }
  
  }
</style>
